<template>
  <a-drawer v-model:open="open"
           :keyboard="false"
           :mask-closable="false"
           :title="formData.id ? '编辑船舶信息' : '添加船舶信息' "
           width="calc(100vw - 560px)"
           wrap-class-name="full-modal"
           @close="handleClose"
           @cancel="handleClose">
    <div class="content-body container">
            <a-row :gutter="40">
                <a-col class="gutter-row" :span="8">
                  <div class="gutter-box fw mb10"><div class="mr6 mb10"><span class="red mr2">*</span>船舶类型：</div>
                    <a-select
                        v-model:value="formData.leiXing"
                        style="width: 100%"
                        placeholder="船舶类型">
                      <a-select-option v-for="item in chuanBoLeiXingList" :key="name" :value="item.name">{{item.name}}</a-select-option>
                    </a-select>
                  </div>
                  <div class="gutter-box fw mb10"><div class="mr6 mb10"><span class="red mr2">*</span>中文船名：</div><a-input v-model:value="formData.zhongWenMing" placeholder="请填写"/></div>
                  <div class="gutter-box fw mb10"><div class="mr6 mb10">船舶功率：</div><a-input v-model:value="formData.gongLv" placeholder="请填写"/></div>
                  <div class="gutter-box fw mb10"><div class="mr6 mb10">船舶航区：</div><a-input v-model:value="formData.hangQu" placeholder="请填写"/></div>
                  <div class="gutter-box fw mb10"><div class="mr6 mb10">船籍：</div><a-input v-model:value="formData.chuanJi" placeholder="请填写"/></div>
                  <div class="gutter-box fw mb10"><div class="mr6 mb10">状态：</div>
                    <a-radio-group v-model:value="formData.zhuangTai" >
                      <a-radio :value="1">发布</a-radio>
                      <a-radio :value="2">未发布</a-radio>
                    </a-radio-group>
                  </div>
<!--                  <div class="gutter-box fw mb10"><div class="mr6 mb10">曾用名：</div><a-input v-model:value="formData.bieMing" placeholder="请填写"/></div>-->
                </a-col>
                <a-col class="gutter-row" :span="8">
                  <div class="gutter-box fw mb10"><div class="mr6 mb10">船舶登记号：</div><a-input v-model:value="formData.dengJiHao" placeholder="请填写"/></div>
                  <div class="gutter-box fw mb10"><div class="mr6 mb10">英文船名：</div><a-input v-model:value="formData.yingWenMing" placeholder="请填写"/></div>
                  <div class="gutter-box fw mb10"><div class="mr6 mb10">所属公司：</div><a-input v-model:value="formData.suoShuGongSi" placeholder="请填写"/></div>
                  <div class="gutter-box fw mb10"><div class="mr6 mb10">船舶电话：</div><a-input v-model:value="formData.dianHua" placeholder="请填写"/></div>
                  <div class="gutter-box fw mb10"><div class="mr6 mb10"><span class="red mr2">*</span>上船当天出勤（天）：</div><a-input v-model:value="formData.shangChuanChuQin" placeholder="请填写"/></div>

                </a-col>
                <a-col class="gutter-row" :span="8">
                  <div class="gutter-box fw mb10"><div class="mr6 mb10">船舶IMO号：</div><a-input v-model:value="formData.imo" placeholder="请填写"/></div>
                  <div class="gutter-box fw mb10"><div class="mr6 mb10">船舶总吨：</div><a-input v-model:value="formData.zongDun" placeholder="请填写"/></div>
                  <div class="gutter-box fw mb10"><div class="mr6 mb10">船舶主机型号：</div><a-input v-model:value="formData.zhuJiXingHao" placeholder="请填写"/></div>
                  <div class="gutter-box fw mb10"><div class="mr6 mb10">船舶识别号：</div><a-input v-model:value="formData.shiBieHao" placeholder="请填写"/></div>
                  <div class="gutter-box fw mb10"><div class="mr6 mb10"><span class="red mr2">*</span>下船当天出勤（天）：</div><a-input v-model:value="formData.xiaChuanChuQin" placeholder="请填写"/></div>

                </a-col>
            </a-row>
      </div>
    <template #footer>
      <div class="gui-padding">
        <a-button type="primary" :loading="addLoading" @click="handleSubmit" class="mr10">确定</a-button>
        <a-button type="default" @click="handleClose">取消</a-button>
      </div>
    </template>
  </a-drawer>
</template>
<script setup>
const open = ref(false)
const addLoading = ref(false)
const userState = useStore.userState()
const chuanBoLeiXingList = computed(()=> userState.getParameterList('cblx'))
const emits = defineEmits(["success"])
const formData = ref({
  dengJiHao:"",
  shiBieHao:"",
  imo:"",
  chuanJi:"",
  leiXing:null,
  bieMing:"",
  zhongWenMing:"",
  yingWenMing:"",
  zongDun:"",
  gongLv:"",
  dianHua:"",
  suoShuGongSi:"",
  zhuJiXingHao:"",
  hangQu:"",
  shangChuanRiQi:"",
  xiaChuanRiQi:"",
  shangChuanChuQin:"",
  xiaChuanChuQin:"",
  heTongJiZhun:"",
  zhuangTai:1,
})

const handleSubmit = async () => {
    try {
      if(!formData.value.leiXing){
        useMessage().error("请选择船舶类型")
        return
      }
      if(!formData.value.zhongWenMing){
        useMessage().error("请输入船舶中文名称")
        return
      }
      if(!formData.value.shangChuanChuQin){
        useMessage().error("请输入上船当天出勤")
        return
      }
      if(!formData.value.xiaChuanChuQin){
        useMessage().error("请输入下船当天出勤")
        return
      }

      addLoading.value = true
      await useSaveUpdateChuanBoXinXiApi(formData.value)
      addLoading.value = false
      useMessage().success(formData.value.id?"编辑船舶信息成功!":"添加船舶信息成功")
      emits("success",formData.value.id ? false : true,formData.value)
      handleClose()
    }catch (e){
      addLoading.value = false
      useMessage().error(e.msg)
    }
}

const handleOpen = (record)=>{
  open.value = true;
  if(record && record.id){
      formData.value = record
  }
}

const handleClose = ()=>{
  open.value = false
  formData.value= {
    id:"",
    dengJiHao:"",
    shiBieHao:"",
    imo:"",
    chuanJi:"中国",
    leiXing:null,
    bieMing:"",
    zhongWenMing:"",
    yingWenMing:"",
    zongDun:"",
    gongLv:"",
    dianHua:"",
    suoShuGongSi:"",
    zhuJiXingHao:"",
    hangQu:"",
    shangChuanRiQi:"",
    xiaChuanRiQi:"",
    shangChuanChuQin:"",
    xiaChuanChuQin:"",
    heTongJiZhun:"",
    zhuangTai:1,
  }
}

defineExpose({
  handleOpen
})
</script>
<style lang="scss">
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    border-radius: 0;
    margin: 0;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
    border-radius: 0;
    padding:0px;
  }
  .ant-modal-body {
    flex: 1;
  }
  .content-body{
    padding:20px 24px;
  }
}
</style>
